<script lang="ts" setup>
import Item from './components/Item.vue'
import {calculateUnit} from '@/utils/io'
import {delayNavigateTo} from '@/utils/navigator'

const {logout} = useUser()
const {success} = useToast()

// 退出登录
async function onLogout() {
    uni.showModal({
        content: '确定要退出账号吗？',
        success: ({confirm}) => {
            if (confirm) {
                logout()
                success('退出成功')
                delayNavigateTo('/pages/index/index')
            }
        }
    })
}

/**
 * 清理缓存逻辑
 */
// #ifdef APP-PLUS
// @ts-expect-error ofc, this is uniapp type
// H5+清理和计算缓存逻辑
const cache = plus.cache as {
    clear: (cb: () => void) => void
    calculate: (cb: (size: number) => void) => void
}

// 定义缓存大小变量
let fileSizeString = $ref('')

// 计算缓存大小
function getCacheSize() {
    cache.calculate(size => fileSizeString = calculateUnit(size))
}

getCacheSize()

// 清除缓存，并重新获取缓存大小
function clearCache() {
    cache.clear(() => success('缓存清理成功！'))
    getCacheSize()
}

// #endif

</script>

<template>
    <view overflow-hidden>
        <view class="list">
            <navigator url="/pages/mine/pages/userinfo" open-type="navigate">
                <Item title="个人信息"/>
            </navigator>
            <navigator url="/pages/forget/index?type=forget" open-type="navigate">
                <Item title="修改密码" is-end/>
            </navigator>
        </view>
        <view class="list">
            <!-- #ifdef APP-PLUS -->
            <Item title="清理缓存" @click="clearCache">
                <template #extra>
                    {{ fileSizeString }}
                </template>
            </Item>
            <!-- #endif -->
            <Item title="关于我们" is-end/>
        </view>

        <view @click="onLogout">
            <button class="setting_button" plain hover-class="setting_button_hover">
                退出登录
            </button>
        </view>
    </view>
</template>
<style lang="scss" scoped>
.setting_button {
    margin: 0;
    padding: 0;
    width: 100%;
    padding: 5rpx 0;
    color: #f38e48;
    font-size: 30rpx;
    margin-top: 40rpx;
    border: none !important;
    box-shadow: 0 0 20rpx 0 rgba(215, 215, 215, 0.35);

    &_hover {
        color: white;
        background-color: #f38e48;
    }
}

.list {
    width: 100%;
    color: #333333;
    margin-top: 30rpx;
    background-color: white;
    box-shadow: 0 0 20rpx 0 rgba(215, 215, 215, 0.35);
}
</style>

